﻿@using Microsoft.AspNetCore.Mvc.TagHelpers
@using Reader.Controllers
@{
    ViewData["Title"] = "Home Page";
    List<Book> hots = ViewData["hot"] as List<Book>;
    List<HomeCategoryBooksModel> categoryBooksModels = ViewData["category_books"] as List<HomeCategoryBooksModel>;
}

<style>
    .container_flex {
        display: flex;
        justify-content: center;
        width: 80vw;
    }

    .fixed-width-box {
        width: 80vw;
        border: 1px solid #ccc;
        padding: 10px;
        margin: 10px;
    }

    .two-column-box {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .column {
        flex-basis: 45%;
        flex-shrink: 0;
        margin: 5px;
        
        display: flex;
        justify-content: left;
    }
    
    .column > div:nth-child(1){
        width: 102px;
        flex-grow: 0;
        flex-shrink: 0;
    }
    .column > div:nth-child(2){
        padding-left: 10px;
    }

    .column > div:nth-child(2) h2 a {
        color: #262626;
        outline: none;
        text-decoration: none;
        font: 18px / 24px PingFangSC-Regular, HelveticaNeue-Light, Helvetica Neue Light, Microsoft YaHei, "sans-serif";
    }
    p.author {
        height: 16px;
        margin-bottom: 6px;
        overflow: hidden;
    }
    p.author a {
        color: #a6a6a6;
        float: left;
        line-height: 16px;
    }
    p.author em {
        color: #e6e6e6;
        float: left;
        font-family: Arial;
        margin: 1px 8px 0;
    }
    p.author span {
        color: #a6a6a6;
        float: left;
        line-height: 16px;
    }
    p.intro {
        color: #666;
        font-size: 14px;
        height: 48px;
        line-height: 24px;
        margin-bottom: 8px;
        overflow: hidden;
    }
    .image-container {
        width: 102px;
        height: 136px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #ccc;
        overflow: hidden;
    }

    .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 让图片填充整个容器并保持比例 */
    }
</style>


<h3 style="padding: 15px 0 0 15px">最多阅读</h3>
<div class="container_flex">
    <div class="fixed-width-box" style="border: none">
        <div class="two-column-box">
            @foreach (var b in hots)
            {
                <div class="column">
                    <div class="image-container">
                        <a asp-controller="Book" asp-action="BookReader" asp-route-bookId="@b.Id" target="_blank"> <img src="/@b.CoverImage" alt=""></a>
                    </div>
                    <div>
                        <div class="book-mid-info">
                            <h2>
                                <a asp-controller="Book" asp-action="BookReader" asp-route-bookId="@b.Id" target="_blank">@b.Title</a>
                            </h2>
                            <p class="author">
                                <a class="name" asp-controller="Book" asp-action="BookSearch" asp-route-keyword="@b.Author" data-eid="qd_B59" target="_blank">@b.Author</a><em>|</em><a asp-controller="Book" asp-action="BookCategory" asp-route-categoryId="@b.CategoryId" target="_blank" data-eid="qd_B60">@b.Category.Name</a><em>|</em>
                                <span>
                                    @if (b.Status == Book.BookStatus.Completed)
                                    {
                                        @("完结")
                                    }
                                    else
                                    {
                                        @("更新")
                                    }
                                </span>
                            </p>
                            <p class="intro"> @b.Description </p>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</div>


@foreach (var cm in categoryBooksModels)
{
    if (cm.Books.Count % 2 == 1 && cm.Books.Count > 0)
    {
        cm.Books.RemoveAt(cm.Books.Count - 1);
    }

    if (cm.Books.Count == 0)
    {
        continue;
    }
    <h3 style="padding: 15px 0 0 15px"><a asp-controller="Book" asp-action="BookCategory" asp-route-categoryId="@cm.BookCategory.Id" style="color: black">@cm.BookCategory.Name</a></h3>
    <div class="container_flex">
        <div class="fixed-width-box" style="border: none">
            <div class="two-column-box">
                
                @foreach (var b in cm.Books)
                {
                    <div class="column">
                        <div class="image-container">
                            <a asp-controller="Book" asp-action="BookReader" asp-route-bookId="@b.Id" target="_blank"> <img src="/@b.CoverImage" alt=""></a>
                        </div>
                        <div>
                            <div class="book-mid-info">
                                <h2>
                                    <a asp-controller="Book" asp-action="BookReader" asp-route-bookId="@b.Id" target="_blank">@b.Title</a>
                                </h2>
                                <p class="author">
                                    <a class="name" asp-controller="Book" asp-action="BookSearch" asp-route-keyword="@b.Author" data-eid="qd_B59" target="_blank">@b.Author</a><em>|</em><a asp-controller="Book" asp-action="BookCategory" asp-route-categoryId="@b.CategoryId" target="_blank" data-eid="qd_B60">@cm.BookCategory.Name</a><em>|</em>
                                    <span>
                                        @if (b.Status == Book.BookStatus.Completed)
                                        {
                                            @("完结")
                                        }
                                        else
                                        {
                                            @("更新")
                                        }
                                    </span>
                                </p>
                                <p class="intro"> @b.Description </p>
                            </div>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
}